<template>
  <div class="commentHeat-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论点赞</el-breadcrumb-item>
      <el-breadcrumb-item>评论热度</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts" ref="container"></div>
  </div>
</template>

<script>
import testAx from '@/utils/testApiServer.js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      testData: {}
    }
  },
  methods: {
    async initTestData() {
      const {data: res} = await testAx.get('/commentsTop')
      console.log(res);
      this.draw(res.comm, res.good)
    },
    draw(x, data) {
      const option = {
        title: {
          text: '热门评论',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          extraCssText: 'max-width: 400px; white-space:pre-wrap',
          formatter: function(params) {
            var res = ''
            for (var i = 0, l = params.length; i < l; i++) {
              // params[i].name：y轴坐标值；params[i].value：柱状值
              const marker = '<span style="font-size: 13px; color: #170000">' + params[i].name + '<span/>'
              res =  marker + '<br/>' + '<span style="font-size: 16px; color: green">' + '点赞数：' + params[i].value + '<span/>'
            }
            return res;
          }
        },
        legend: {
          top: 'bottom'
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            rotate: 20,
            fontSize: 12,
            formatter:function(value){
              if(value.length > 6){
                return `${value.slice(0,4)}...`;
              }
              return value;
            }
          },
        },
        series: [
          {
            name: '评论',
            type: 'bar',
            data: data,
            itemStyle:{
              color: '#5bb8ea'  
            }
          },
        ]
      };
      var myCharts = echarts.init(this.$refs.container)
      myCharts.setOption(option)
    }
  },
  mounted() {
    this.initTestData()
  }
}
</script>

<style lang="less" scoped>
.echarts {
  width: 1200px;
  height: 700px;
  margin: 80px auto;
}
</style>